<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue基础测试</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      
      var vm = new Vue({
        template: `  <div>
          <p>{{ message }}</p>
          <p @click="click">{{ reverseMessage }}</p>
          <input v-model="message">
        </div>`,
        data() {
          return {
            message: 'Hello Vue.js!',
          }
        },
        computed: {
          reverseMessage: function () {
            return this.message.split('').reverse().join('')
          }
        },
        methods: {
          click(){
            console.log('点击了。。。')
          }
        },
        beforeCreate(){
          console.log('beforeCreate')
        },
        created(){
          console.log('created')
        },
        beforeMount(){
          console.log('beforeMount')
        },
        mounted(){
          console.log('mounted')
        },
        beforeUpdate(){
          console.log('beforeUpdate')
        },
        updated(){
          console.log('updated')
        },
        beforeDestroy(){
          console.log('beforeDestroy')
        },
        destroyed(){
          console.log('destroyed')
        },

      })

      /**
       * 两种方案
       * 
       **/

      //生成dom，并放到#app元素下面
      vm.$mount('#app')


      // 封装弹窗组件时一般采用这种方式
      // //只生成dom，并不插入到页面中
      // vm.$mount()

      // //手动插入到页面中
      // document.body.appendChild(vm.#el)

    </script>
  </body>
</html>
